<style lang="scss" scoped>
$w: 240px;
.side-bar {
  background-color: #545c64;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: $w;
  transition: all 300ms ease-in-out;

  h1 {
    height: 70px;
    color: white;
    background-color: #001e42;
  }

  .app-menu:not(.el-menu--collapse) {
    width: $w;
  }

  .el-menu {
    border-right: 0px none;
  }

  &.mini {
    width: 64px;
  }
}
</style>
<template>
  <div v-loading="appLoading" class="side-bar" :class="{ mini: menuCollapse }">
    <happy-scroll
      v-if="menuList.length"
      size="8"
      resize
      hide-horizontal
      color="rgba(64,158,255,0.5)"
    >
      <div>
        <h1>logo</h1>
        <el-menu
          class="app-menu"
          router
          :default-active="defaultActive"
          background-color="#545c64"
          text-color="#fff"
          :collapse="menuCollapse"
          active-text-color="#409EFF"
          @select="select"
        >
          <template v-for="menu in menuList">
            <el-submenu
              v-if="menu.children && menu.children.length"
              :key="menu.id"
              :index="menu.url || menu.id + ''"
            >
              <template slot="title">
                <i :class="[menu.icon]"></i>
                <span>{{ menu.name }}</span>
              </template>
              <el-menu-item
                v-for="sub in menu.children"
                :key="sub.id"
                :index="sub.url"
                >{{ sub.name }}
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :key="menu.id" :index="menu.url">
              <i :class="[menu.icon]"></i>
              <span slot="title">{{ menu.name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
    </happy-scroll>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { AppLoadingMixin } from "../../lib/mixins/app-loading";
import { stateTypes, mutationsTypes } from "../../store/admin";

export default {
  name: "AdminSideBar",
  comments: {},
  mixins: [AppLoadingMixin],
  computed: {
    ...mapState("admin", [stateTypes.menuCollapse, stateTypes.menuList]),
    defaultActive() {
      return this.$route.path;
    }
  },
  async mounted() {
    if (!this[stateTypes.menuList].length) {
      await this.getMenuList();
    }
    this.$nextTick(() => {
      this.select(this.$route.path);
    });
  },
  methods: {
    ...mapMutations("admin", [mutationsTypes.setCurrentMenu]),
    ...mapActions("admin", ["getMenuList"]),
    select(index) {
      this[mutationsTypes.setCurrentMenu]({ url: index });
    }
  }
};
</script>
